<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;
        charset=utf-8">
        <meta name="viewport" content="width=device-width,
        initial-scale=1,maxinum-scalable=no">

        <title>注册登录界面</title>
        <link rel="stylesheet" href="11.css">

    </head>
    <body>
        <div class="container">
            <div class="from-box">
                <!--注册-->
                <div class="register-box hidden ">
                <h1>register</h1>
                <input type="text" placeholder="用户名">
                <input type="email" placeholder="邮箱">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
                <button>注册</button>
                </div>
                <!--登录-->
                <div class="login-box ">
                    <h1>login</h1>
                    <input type="text" placeholder="用户名">
                    <input type="password" placeholder="密码">
                    <button>登录</button>
                </div>

            </div>
            <div class="con-box left">
                <h2>欢迎来到<span>关系抽取</span></h2>
                <p>快来使用你的专属<span>账号</span>吧</p>
                <img src="1.jpeg" alt="">
                <p>已有账号</p>
                <button id="login">去登录</button>
            </div>
            <div class="con-box right">
                <h2>欢迎来到<span>关系抽取</span></h2>
                <p>快来创建你的专属<span>账号</span>吧</p>
                <img src="2.jpeg" alt="">
                <p>没有账号？</p>
                <button id="register">去注册</button>
            </div>
        </div>
        <script>
            //要操作到的元素
            let login=document.getElementById('login');
            let register=document.getElementById('register');
            let from_box=document.getElementsByClassName('from-box')[0];
            let register_box=document.getElementsByClassName
            ('register-box')[0];
            let login_box=document.getElementsByClassName
            ('login-box')[0];
            //去注册页面点击事件
            register.addEventListener('click',()=>{
                from_box.style.transfrom='translateX(80%)';
                login_box.classList.add('hidden');
                register_box.classList.remove('hidden');
            })
          //去登录页面点击事件
            login.addEventListener('click',()=>{
                from_box.style.transfrom='translateX(0%)';
                register_box.classList.add('hidden');
                login_box.classList.remove('hidden');
            })
            

        </script>
    </body>
</html>